<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>毕业生简历</title>
    <style>
        :root {
            --primary-color: #1e88e5;
            --primary-light: #64b5f6;
            --primary-dark: #1565c0;
            --text-color: #333;
            --text-light: #666;
            --bg-color: #f5f7fa;
            --card-bg: #fff;
            --border-color: #e0e0e0;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--bg-color);
            padding-top: 70px;
        }

        a {
            text-decoration: none;
            color: var(--primary-color);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 导航栏 */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: var(--card-bg);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            transition: all 0.3s ease;
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color);
        }

        .nav-links {
            display: flex;
            list-style: none;
        }

        .nav-links li {
            margin-left: 30px;
        }

        .nav-links a {
            color: var(--text-color);
            font-weight: 500;
            transition: color 0.3s;
            position: relative;
        }

        .nav-links a:hover {
            color: var(--primary-color);
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary-color);
            transition: width 0.3s;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .menu-toggle {
            display: none;
            cursor: pointer;
            font-size: 1.5rem;
        }

        /* 主要内容 */
        section {
            padding: 60px 0;
        }

        .section-title {
            text-align: center;
            margin-bottom: 40px;
            position: relative;
        }

        .section-title h2 {
            font-size: 2rem;
            color: var(--primary-dark);
            display: inline-block;
            padding-bottom: 10px;
        }

        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background-color: var(--primary-color);
        }

        .card {
            background-color: var(--card-bg);
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            padding: 30px;
            margin-bottom: 30px;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        /* 个人信息 */
        .profile {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .profile-img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid var(--primary-light);
            margin-bottom: 20px;
        }

        .profile h1 {
            font-size: 2rem;
            margin-bottom: 10px;
            color: var(--primary-dark);
        }

        .profile p {
            color: var(--text-light);
            margin-bottom: 15px;
        }

        .contact-info {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }

        .contact-item {
            display: flex;
            align-items: center;
        }

        .contact-item::before {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-right: 8px;
            background-size: contain;
            background-repeat: no-repeat;
        }

        .phone::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e88e5'%3E%3Cpath d='M20 22.621l-3.521-3.52a1 1 0 00-1.414 0l-2.595 2.596a12.001 12.001 0 01-6.89-6.89l2.596-2.595a1 1 0 000-1.414L1.379 4l3.52-3.521a1 1 0 011.414 0l2.595 2.596a12.001 12.001 0 016.89 6.89l-2.596 2.595a1 1 0 000 1.414L20 22.621z'/%3E%3C/svg%3E");
        }

        .email::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e88e5'%3E%3Cpath d='M3 3h18a1 1 0 011 1v16a1 1 0 01-1 1H3a1 1 0 01-1-1V4a1 1 0 011-1zm17 4.238l-7.928 7.1L4 7.216V19h16V7.238zM4.511 5l7.55 6.662L19.502 5H4.511z'/%3E%3C/svg%3E");
        }

        .location::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e88e5'%3E%3Cpath d='M12 20.9l4.95-4.95a7 7 0 10-9.9 0L12 20.9zm0 2.828l-6.364-6.364a9 9 0 1112.728 0L12 23.728zM12 13a2 2 0 100-4 2 2 0 000 4zm0 2a4 4 0 110-8 4 4 0 010 8z'/%3E%3C/svg%3E");
        }

        .github::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e88e5'%3E%3Cpath d='M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 006.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.338 1.087 2.912.825.088-.65.35-1.087.638-1.337-2.225-.25-4.55-1.113-4.55-4.938 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 012.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0022 12c0-5.525-4.475-10-10-10z'/%3E%3C/svg%3E");
        }

        /* 教育背景 */
        .education-item {
            display: flex;
            margin-bottom: 25px;
            position: relative;
            padding-left: 30px;
        }

        .education-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 5px;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: var(--primary-color);
        }

        .education-item::after {
            content: '';
            position: absolute;
            left: 7px;
            top: 20px;
            bottom: -25px;
            width: 1px;
            background-color: var(--border-color);
        }

        .education-item:last-child::after {
            display: none;
        }

        .education-content {
            flex: 1;
        }

        .education-year {
            font-weight: 600;
            color: var(--primary-dark);
            margin-bottom: 5px;
        }

        .education-degree {
            font-weight: 600;
            margin-bottom: 5px;
        }

        .education-school {
            color: var(--text-light);
            margin-bottom: 10px;
        }

        /* 技能 */
        .skills-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .skill-category {
            flex: 1;
            min-width: 250px;
        }

        .skill-category h3 {
            margin-bottom: 15px;
            color: var(--primary-dark);
            padding-bottom: 5px;
            border-bottom: 2px solid var(--primary-light);
        }

        .skill-item {
            margin-bottom: 15px;
        }

        .skill-name {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }

        .skill-bar {
            height: 8px;
            background-color: #e0e0e0;
            border-radius: 4px;
            overflow: hidden;
        }

        .skill-progress {
            height: 100%;
            background-color: var(--primary-color);
            border-radius: 4px;
            width: 0;
            transition: width 1s ease-in-out;
        }

        /* 项目经验 */
        .project-item {
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
        }

        .project-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .project-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            cursor: pointer;
        }

        .project-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--primary-dark);
        }

        .project-period {
            color: var(--text-light);
            font-size: 0.9rem;
        }

        .project-content {
            display: block;
            padding-top: 10px;
        }

        .project-role {
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--text-color);
        }

        .project-description {
            margin-bottom: 15px;
        }

        .project-tech {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .tech-tag {
            background-color: var(--primary-light);
            color: white;
            padding: 3px 10px;
            border-radius: 15px;
            font-size: 0.8rem;
        }

        /* 获奖经历 */
        .award-item {
            display: flex;
            margin-bottom: 20px;
        }

        .award-icon {
            width: 40px;
            height: 40px;
            background-color: var(--primary-light);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .award-content h3 {
            margin-bottom: 5px;
            color: var(--primary-dark);
        }

        .award-content p {
            color: var(--text-light);
        }

        /* 自我评价 */
        .self-intro p {
            margin-bottom: 15px;
            line-height: 1.8;
        }

        /* 页脚 */
        footer {
            background-color: var(--primary-dark);
            color: white;
            text-align: center;
            padding: 20px 0;
            margin-top: 50px;
        }

        .social-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 20px 0;
        }

        .social-link {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s;
        }

        .social-link:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .copyright {
            font-size: 0.9rem;
            opacity: 0.8;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .menu-toggle {
                display: block;
            }

            .nav-links {
                position: fixed;
                top: 70px;
                left: 0;
                right: 0;
                background-color: var(--card-bg);
                flex-direction: column;
                align-items: center;
                padding: 20px 0;
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
                transform: translateY(-150%);
                transition: transform 0.3s ease;
            }

            .nav-links.active {
                transform: translateY(0);
            }

            .nav-links li {
                margin: 15px 0;
            }

            .profile-img {
                width: 120px;
                height: 120px;
            }

            .contact-info {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }

            .education-item {
                flex-direction: column;
            }

            .education-item::before {
                top: 0;
            }

            .education-item::after {
                left: 7px;
                top: 15px;
                bottom: -15px;
            }
        }

        /* 打印样式 */
        @media print {
            body {
                padding-top: 0;
                background-color: white;
                color: black;
            }

            header, footer {
                display: none;
            }

            section {
                padding: 30px 0;
                page-break-inside: avoid;
            }

            .card {
                box-shadow: none;
                border: 1px solid #ddd;
                page-break-inside: avoid;
            }

            a {
                text-decoration: none;
                color: black;
            }

            .no-print {
                display: none;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <nav>
                <div class="logo">个人简历</div>
                <div class="menu-toggle">
                    ☰
                </div>
                <ul class="nav-links">
                    <li><a href="#profile">个人信息</a></li>
                    <li><a href="#education">教育背景</a></li>
                    <li><a href="#skills">技能特长</a></li>
                    <li><a href="#projects">项目经验</a></li>
                    <li><a href="#awards">获奖经历</a></li>
                    <li><a href="#intro">自我评价</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="container">
        <!-- 个人信息 -->
        <section id="profile">
            <div class="card profile">
                <img src="https://via.placeholder.com/150" alt="照片" class="profile-img">
                <h1>张三</h1>
                <p>前端开发工程师 | 应届毕业生</p>
                <div class="contact-info">
                    <div class="contact-item phone">
                        <span>138-XXXX-XXXX</span>
                    </div>
                    <div class="contact-item email">
                        <span>example@email.com</span>
                    </div>
                    <div class="contact-item location">
                        <span>北京市海淀区</span>
                    </div>
                    <div class="contact-item github">
                        <span>github.com/username</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 教育背景 -->
        <section id="education">
            <div class="section-title">
                <h2>教育背景</h2>
            </div>
            <div class="card">
                <div class="education-item">
                    <div class="education-content">
                        <div class="education-year">2020.09 - 2024.06</div>
                        <div class="education-degree">计算机科学与技术 学士</div>
                        <div class="education-school">北京大学</div>
                        <p>主修课程：数据结构与算法、操作系统、计算机网络、数据库系统、Web前端开发、软件工程</p>
                    </div>
                </div>
                <div class="education-item">
                    <div class="education-content">
                        <div class="education-year">2017.09 - 2020.06</div>
                        <div class="education-degree">高中</div>
                        <div class="education-school">北京市第一中学</div>
                        <p>理科实验班</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 技能特长 -->
        <section id="skills">
            <div class="section-title">
                <h2>技能特长</h2>
            </div>
            <div class="card">
                <div class="skills-container">
                    <div class="skill-category">
                        <h3>前端技术</h3>
                        <div class="skill-item">
                            <div class="skill-name">
                                <span>HTML/CSS</span>
                                <span>90%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-progress" data-width="90%"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <div class="skill-name">
                                <span>JavaScript</span>
                                <span>85%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-progress" data-width="85%"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <div class="skill-name">
                                <span>React</span>
                                <span>80%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-progress" data-width="80%"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <div class="skill-name">
                                <span>Vue.js</span>
                                <span>75%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-progress" data-width="75%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="skill-category">
                        <h3>后端技术</h3>
                        <div class="skill-item">
                            <div class="skill-name">
                                <span>Node.js</span>
                                <span>70%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-progress" data-width="70%"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <div class="skill-name">
                                <span>Express</span>
                                <span>65%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-progress" data-width="65%"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <div class="skill-name">
                                <span>MySQL</span>
                                <span>75%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-progress" data-width="75%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="skill-category">
                        <h3>其他技能</h3>
                        <div class="skill-item">
                            <div class="skill-name">
                                <span>Git</span>
                                <span>80%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-progress" data-width="80%"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <div class="skill-name">
                                <span>Webpack</span>
                                <span>70%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-progress" data-width="70%"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <div class="skill-name">
                                <span>Photoshop</span>
                                <span>60%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-progress" data-width="60%"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <div class="skill-name">
                                <span>英语(CET-6)</span>
                                <span>85%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-progress" data-width="85%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 项目经验 -->
        <section id="projects">
            <div class="section-title">
                <h2>项目经验</h2>
            </div>
            <div class="card">
                <div class="project-item">
                    <div class="project-header">
                        <div class="project-title">校园二手交易平台</div>
                        <div class="project-period">2023.03 - 2023.06</div>
                    </div>
                    <div class="project-content">
                        <div class="project-role">前端开发负责人</div>
                        <div class="project-description">
                            <p>一个基于React和Node.js的校园二手交易平台，实现了用户注册登录、商品发布、搜索、交易等功能。项目采用前后端分离架构，前端使用React Hooks管理状态，Ant Design组件库构建UI界面。</p>
                        </div>
                        <div class="project-tech">
                            <span class="tech-tag">React</span>
                            <span class="tech-tag">Ant Design</span>
                            <span class="tech-tag">Node.js</span>
                            <span class="tech-tag">MongoDB</span>
                        </div>
                    </div>
                </div>
                <div class="project-item">
                    <div class="project-header">
                        <div class="project-title">在线学习管理系统</div>
                        <div class="project-period">2022.09 - 2023.01</div>
                    </div>
                    <div class="project-content">
                        <div class="project-role">前端开发成员</div>
                        <div class="project-description">
                            <p>一个为学校开发的在线学习管理系统，包含课程管理、作业提交、成绩查询等功能。负责前端页面开发，使用Vue.js框架和Element UI组件库，实现了响应式布局和动态数据展示。</p>
                        </div>
                        <div class="project-tech">
                            <span class="tech-tag">Vue.js</span>
                            <span class="tech-tag">Element UI</span>
                            <span class="tech-tag">Axios</span>
                            <span class="tech-tag">MySQL</span>
                        </div>
                    </div>
                </div>
                <div class="project-item">
                    <div class="project-header">
                        <div class="project-title">个人博客系统</div>
                        <div class="project-period">2022.03 - 2022.06</div>
                    </div>
                    <div class="project-content">
                        <div class="project-role">全栈开发</div>
                        <div class="project-description">
                            <p>一个基于Node.js和Express的个人博客系统，实现了文章发布、分类管理、评论等功能。前端使用原生JavaScript和Bootstrap构建，后端使用Express框架和MongoDB数据库。</p>
                        </div>
                        <div class="project-tech">
                            <span class="tech-tag">JavaScript</span>
                            <span class="tech-tag">Bootstrap</span>
                            <span class="tech-tag">Express</span>
                            <span class="tech-tag">MongoDB</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 获奖经历 -->
        <section id="awards">
            <div class="section-title">
                <h2>获奖经历</h2>
            </div>
            <div class="card">
                <div class="award-item">
                    <div class="award-icon">🏆</div>
                    <div class="award-content">
                        <h3>全国大学生计算机设计大赛</h3>
                        <p>一等奖 | 2023年</p>
                        <p>作品《智能校园二手交易平台》获得全国一等奖</p>
                    </div>
                </div>
                <div class="award-item">
                    <div class="award-icon">🥇</div>
                    <div class="award-content">
                        <h3>校级奖学金</h3>
                        <p>一等奖学金 | 2022年</p>
                        <p>综合成绩排名专业前5%</p>
                    </div>
                </div>
                <div class="award-item">
                    <div class="award-icon">📜</div>
                    <div class="award-content">
                        <h3>优秀学生干部</h3>
                        <p>校级荣誉 | 2021年</p>
                        <p>担任班级学习委员，组织多次学习活动</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 自我评价 -->
        <section id="intro">
            <div class="section-title">
                <h2>自我评价</h2>
            </div>
            <div class="card self-intro">
                <p>作为一名计算机专业的应届毕业生，我对前端开发充满热情，具备扎实的HTML、CSS和JavaScript基础，熟悉React和Vue.js等主流框架。</p>
                <p>在校期间参与多个项目开发，积累了实际开发经验，能够独立完成前端页面开发工作。具有良好的团队协作能力和沟通能力，能够快速学习新技术并应用到实际项目中。</p>
                <p>对用户体验和界面设计有浓厚兴趣，注重代码质量和可维护性，追求编写优雅高效的代码。希望通过不断学习和实践，成为一名优秀的前端开发工程师。</p>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <div class="social-links">
                <a href="#" class="social-link">G</a>
                <a href="#" class="social-link">in</a>
                <a href="#" class="social-link">T</a>
                <a href="#" class="social-link">W</a>
            </div>
            <p class="copyright">© created by HTML学长.</p>
            <p class="copyright">简历模板，仅供参考</p>
        </div>
    </footer>

    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
            } else {
                header.style.boxShadow = 'none';
            }
        });

        // 移动端菜单切换
        const menuToggle = document.querySelector('.menu-toggle');
        const navLinks = document.querySelector('.nav-links');

        menuToggle.addEventListener('click', function() {
            navLinks.classList.toggle('active');
            menuToggle.textContent = navLinks.classList.contains('active') ? '✕' : '☰';
        });

        // 平滑滚动 - 兼容性处理
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    // 使用requestAnimationFrame实现平滑滚动
                    const startPosition = window.pageYOffset;
                    const targetPosition = targetElement.offsetTop - 70;
                    const distance = targetPosition - startPosition;
                    const duration = 500;
                    let startTime = null;
                    
                    function animation(currentTime) {
                        if (startTime === null) startTime = currentTime;
                        const timeElapsed = currentTime - startTime;
                        const run = easeInOutQuad(timeElapsed, startPosition, distance, duration);
                        window.scrollTo(0, run);
                        if (timeElapsed < duration) requestAnimationFrame(animation);
                    }
                    
                    function easeInOutQuad(t, b, c, d) {
                        t /= d/2;
                        if (t < 1) return c/2*t*t + b;
                        t--;
                        return -c/2 * (t*(t-2) - 1) + b;
                    }
                    
                    requestAnimationFrame(animation);
                }
            });
        });

        // 技能条动画
        function animateSkillBars() {
            const skillBars = document.querySelectorAll('.skill-progress');
            skillBars.forEach(bar => {
                const width = bar.getAttribute('data-width');
                bar.style.width = width;
            });
        }

        // 页面加载完成后执行动画
        document.addEventListener('DOMContentLoaded', function() {
            animateSkillBars();
        });

        // 确保打印时技能条显示正确
        window.addEventListener('beforeprint', function() {
            animateSkillBars();
        });
    </script>
</body>
</html>